<template>
    <div class="attributeContainer">
        <div class="desc">
            <span>流程表单中的执行动作分为两类：</span>
            <p style="margin-top: 10px;"></p>
            <span style="font-weight: 600;">1.流转按钮：</span>
            <span>当你点击这类按钮，表单会像接力赛一样，自动传递到流程的下一个环节。这就像是告诉系统：“我已经处理完了，可以交给下一个接棒的人了。”</span>
            <p style="margin-top: 5px;"></p>
            <span style="font-weight: 600;">2.本节点动作：</span>
            <span>这类按钮用于完成当前环节的任务，但不会将表单传递出去。 例如：保存、撤回、终止等。</span>        
        </div>
        <div class="default-action">
            <div class="select-all">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" :disabled="props.isRead">
                    <span>全选</span>
                </el-checkbox>
                <el-button circle style="width: 18px; height: 18px; margin-left: 10px;" type="primary" plain
                    @click="addCheckBoxItem('','','0')" v-if="!props.isRead">
                    <template #icon>
                        <el-icon size="10"><Plus /></el-icon>
                    </template>
                </el-button>
            </div>
            <el-checkbox-group v-model="attributeConfigObj.checkedDefaultCheckList" @change="handleCheckedChange" :disabled="props.isRead">
                <el-checkbox v-for="(item, index) in attributeConfigObj!.defaultCheckList" :key="item.id" :value="item.id" class="act-item">
                    <div class="actItemCon">
                        <span class="readLeft" v-if="!item.isEdit">{{ item.label }} - {{ item.value }}</span>
                        <div class="editLeft" v-else>
                            <el-input v-model="item.label" style="width: 100px;" placeholder="名称" :disabled="props.isRead"/>
                            <span style="margin: 0 10px;">-</span>
                            <el-input v-model="item.value" style="width: 100px" placeholder="代码" :disabled="props.isRead" />
                            <div style="display:inline-block; margin-left: 10px;"
                                @click.prevent="props.isRead ? null : item.isEdgeAction = !item.isEdgeAction">
                                <el-tag type="success" v-if="item.isEdgeAction" disable-transitions>流转</el-tag>
                                <el-tag type="danger" v-else disable-transitions>本节点</el-tag>
                            </div>
                            <svg-icon name="office-delete" width="16px" height="16px" color=var(--el-text-color-secondary) 
                                style="margin-left: 15px;" 
                                @click.prevent="deleteCheckBoxItem(item.id)" v-if="!props.isRead"> 
                            </svg-icon>
                        </div>
                        <el-button plain @click.prevent="clickCheck(item, index)" 
                            v-if="attributeConfigObj.checkedDefaultCheckList.includes(item.id)"
                            :type="hasRiskData(item) ? 'primary' : 'default'" size="small">预处理</el-button>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <check-dig :initMsg="checkParams" @closeDig="checkVisible=false" @save="saveCheck" v-if="checkVisible" /> 
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { v4 as uuidv4 } from 'uuid';
import checkDig from './action/checkDig.vue'

// 定义 defaultCheckList 的元素类型
interface CheckItem {
    id: string
    label: string
    value: string
    isEdit: boolean
    isEdgeAction: boolean,
    startCheck?: any,
    secondConfirm?: any,
}
const props = defineProps({
    isRead: {
        type: Boolean,
        default: false,
    },
}) 
const attributeConfigObj = inject('attributeConfigObj', ref({
    defaultCheckList: [] as CheckItem[],
    checkedDefaultCheckList: [] as string[],
}))

const checkAll = ref(false)
const isIndeterminate = ref(true)
const handleCheckAllChange = (val: boolean) => {
    attributeConfigObj.value.checkedDefaultCheckList = val ? attributeConfigObj.value.defaultCheckList.map((item:any) => item.id) : []
    isIndeterminate.value = false
}
const handleCheckedChange = (value: string[]) => {    
    const checkedCount = value.length
    checkAll.value = checkedCount === attributeConfigObj.value.defaultCheckList.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < attributeConfigObj.value.defaultCheckList.length
}
onMounted(() => {
    handleCheckedChange(attributeConfigObj.value.checkedDefaultCheckList);
})
const addCheckBoxItem = (name:string,code:string,isEdgeAction:string) => {
    const uniqueId = uuidv4();    
    attributeConfigObj.value.defaultCheckList.push({
        id: `custom-${uniqueId}`,
        label: name?name:'',
        value: code?code:'',
        isEdit: true,
        isEdgeAction: isEdgeAction==='1'? true : false,
        startCheck: null,
        secondConfirm: null,
    })
    attributeConfigObj.value.checkedDefaultCheckList.push(`custom-${uniqueId}`)
}
const deleteCheckBoxItem = (id:string) => {
    const index = attributeConfigObj.value.defaultCheckList.findIndex((item:any) => item.id === id)    
    const index1 = attributeConfigObj.value.checkedDefaultCheckList.findIndex((item:string) => item === id)
    if(index1>=0){
        attributeConfigObj.value.checkedDefaultCheckList.splice(index1, 1)
        attributeConfigObj.value.defaultCheckList.splice(index, 1)
    }else{
        attributeConfigObj.value.defaultCheckList.splice(index, 1)
        //判断是否全选
        const checkedCount = attributeConfigObj.value.checkedDefaultCheckList.length
        checkAll.value = checkedCount === attributeConfigObj.value.defaultCheckList.length
        isIndeterminate.value = checkedCount > 0 && checkedCount < attributeConfigObj.value.defaultCheckList.length
    }
    
}

const hasRiskData = (item: any) => {
    return (item.secondConfirm && (
        (item.secondConfirm.method && item.secondConfirm.method.length > 0) || 
        (item.secondConfirm.risk && item.secondConfirm.risk.length)
    )) || (item.startCheck && (
        (item.startCheck.method && item.startCheck.method.length > 0) ||
        (item.startCheck.risk && item.startCheck.risk.length)
    ));
}

const checkVisible = ref(false);
const checkParams = ref({});

const clickCheck = (item: any, index: number) => { 
    checkVisible.value = true;
    checkParams.value = {
        row: item,
        index: index,
        isRead: props.isRead
    };
}

const saveCheck = (val: any) => {
    // console.log('保存预处理：', val);
    let msg = JSON.parse(JSON.stringify(val));
    attributeConfigObj.value.defaultCheckList[msg.index].startCheck =  msg.startCheck;
    attributeConfigObj.value.defaultCheckList[msg.index].secondConfirm =  msg.secondConfirm;
}
</script>
<style scoped lang="scss">
.desc{
    margin-top: 20px;
    background-color: var(--el-bg-color-page);
    border-radius: 8px;
    padding: 20px;
    font-size: 12px;
    line-height: 20px;
}
.default-action {
    margin: 20px 0 0 30px;
    .select-all {
        display: flex;
        align-items: center;
    }

    .el-checkbox-group {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        .el-checkbox{ margin-right: 0;}
    }
    .actItemCon{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .editLeft{ 
            display: flex;
            align-items: center;
        }
    }
}

.act-item {
    height: 35px;

    :deep(.el-checkbox__label) {
        padding-left: 15px;
        width: 100%;
    }
}
.actItemCon{ 
    display: flex;
}
</style>
